<template>
	<view class="page">
		<Navbar title="娱乐预览详情" />
		<u-sticky customNavHeight="0" z-index="6">
			<u-image show-loading :show-menu-by-longpress="false" :src="detail.cover_img" width="100%" height="248px"
				@click="preImage" />
		</u-sticky>
		<view class="body">
			<view class="tag">丘山阅</view>
			<view class="mark">丘山阅镇</view>
			<Sub-title :label="detail.shop_name" bottom-color="#E9F4F4" />
			<view class="base">
				<view>
					<u-text :text="`${detail.start_time}——${detail.end_time}`" prefix-icon="clock-fill"
						icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" />
					<u-text :text="detail.address || ''" prefix-icon="map-fill"
						icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="handleMap" />
					<u-text :text="detail.phone" prefix-icon="phone-fill"
						icon-style="font-size: 28rpx; color: #2CB9A4; margin-right: 20rpx" lines="1" line-height="60rpx"
						color="#555555" size="28rpx" @click="callPhone" />
				</view>
				<view class="status">
					<u-image show-loading :show-menu-by-longpress="false" v-if="timeout"
						:src="require('@/static/my/timeout.png')" width="116rpx" height="72rpx" />
				</view>
			</view>
			<Sub-title label="门票" bottom-color="#E9F4F4" />
			<view class="card-item" :style="{
          backgroundImage: `url(${webSrc('/assets/web_img/home/ticket-card2.png')})`,
        }">
				<view>
					<u-text :text="detail.title" color="#000" size="32rpx" bold />
					<u-text text="随时可订票" color="#555555" size="28rpx" line-height="60rpx" />
					<u-text :text="`已售${detail.sold_num || 0}`" color="#3BA199  " size="24rpx" />
				</view>
				<view>
					<view class="price">
						<text>售价</text>
						<text>￥</text>
						<text>{{ detail.price }}</text>
					</view>
					<view class="btn" :class="{ disabled: timeout }" @click="handlePay">立即参与</view>
				</view>
			</view>
			<Sub-title label="简介" bottom-color="#E9F4F4" />
			<u-parse :content="detail.introduction" />
		</view>
	</view>
</template>

<script>
	import Navbar from "@/components/Navbar/index";
	import {
		homeProjectInfo
	} from "@/request/homeApi.js";
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				detail: {},
			};
		},
		onLoad(e) {
			this.getData(e.id);
		},
		computed: {
			// 是否已过期
			timeout() {
				let end = Number(new Date(this.detail.end_time + " 23:59:59"));
				let now = Number(new Date());
				return now > end;
			},
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		methods: {
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.cover_img],
				});
			},
			// 点击拨号
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.phone,
				});
			},
			// 跳转地图
			handleMap() {
				const {
					lat,
					lng,
					address
				} = this.detail;
				// uni.openLocation({
				//   latitude: lat,
				//   longitude: lng,
				//   address: address,
				//   scale: 16,
				// });
				uni.navigateTo({
					url: `/pages/parse/map?lat=${lat}&lng=${lng}`
				});
			},
			// 获取详情
			getData(id) {
				homeProjectInfo({
					id
				}).then((res) => {
					if (res.code == 1) {
						this.detail = res.data;
					}
				});
			},
			// 买票
			handlePay() {
				if (this.timeout) {
					uni.showToast({
						title: "该活动已结束",
						icon: "none",
					});
					return;
				}
				this.$author(() => {
					uni.navigateTo({
						url: `/pages/home/ticketCheck?id=${this.detail.id}&type=project`,
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.body {
			width: 100%;
			padding: 20rpx;
			z-index: 8;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: -80rpx;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;

			.mark {
				position: absolute;
				top: -80rpx;
				right: 30rpx;
				width: 172rpx;
				height: 56rpx;
				color: #fff;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #0000006b;
			}

			.tag {
				position: absolute;
				right: 0;
				top: 40rpx;
				color: #fff;
				font-weight: 600;
				font-size: 32rpx;
				background-color: #3ba199cc;
				padding: 4rpx 24rpx;
				border-radius: 24rpx 0 0 24rpx;
			}

			.base {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				>view:first-child {
					flex: 1;
				}

				.status {
					width: 116rpx;
				}
			}

			.card-item {
				width: 100%;
				height: 180rpx;
				margin: 20rpx 0;
				background-size: 100% 100%;
				padding: 0 40rpx;
				display: flex;
				box-sizing: border-box;
				align-items: center;

				>view:first-child {
					flex: 1;
				}

				>view:last-child {
					width: 172rpx;
					height: 140rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.price {
						color: #ff3e3e;

						>text:first-child {
							font-size: 28rpx;
						}

						>text:nth-child(2) {
							font-size: 24rpx;
						}

						>text:last-child {
							font-size: 40rpx;
						}
					}

					.btn {
						width: 172rpx;
						height: 56rpx;
						color: #fff;
						font-size: 28rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 28rpx;
						background-color: $active-color;
					}

					.disabled {
						color: #f9f9f9;
						background-color: #dbdbdb;
					}
				}
			}
		}
	}
</style>